{% extends 'wxchat/wxbase.html' %}{% load static %}

{% block tabpanel %}
    <div class="weui-tab__content" id="tab1">
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd">
                <div class="weui-flex">
                    <div class="weui-flex__item"><span class="title">GG列表</span></div>
                    <div class="weui-flex__item"></div>
                    <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
                </div>
            </div>
            <div class="weui-panel__bd" id="dogGG">

            </div>
            <div class="weui-panel__ft">
                <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="dogGGmore" style="display: none">
                    <div class="weui-cell__bd">查看更多</div>
                    <span class="weui-cell__ft"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="weui-tab__content" id="tab2">
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd">
                <div class="weui-flex">
                    <div class="weui-flex__item"><span class="title">MM列表</span></div>
                    <div class="weui-flex__item"></div>
                    <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
                </div>
            </div>
            <div class="weui-panel__bd" id="dogMM"></div>
            <div class="weui-panel__ft">
                <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="dogMMmore" style="display: none">
                    <div class="weui-cell__bd">查看更多</div>
                    <span class="weui-cell__ft"></span>
                </a>
            </div>
        </div>
    </div>

{% endblock tabpanel %}
{% block tabbar %}
    <a href="#tab1" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
             <i class="icon iconfont icon-man"></i>
        </div>
        <p class="weui-tabbar__label">GG</p>
    </a>
    <a href="#tab2" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <i class="icon iconfont icon-female4"></i>
        </div>
        <p class="weui-tabbar__label">MM</p>
    </a>
{% endblock tabbar %}
{% block add %}
      <a id="pet_breed" class="circle" href="javascript:;">
          <div class="circle_icon"><i class="icon iconfont icon-zengjia16"></i></div>
          <p>发布</p>
      </a>
    <div class="weui-skin_android" id="actionsheet" style="display: none">
        <div class="weui-mask"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">
                   <a href="{% url 'dog-breed-add' %}?next={{ next }}&sex=0" >
                        <img  src="{% static 'wxchat/images/gg.png' %}">
                        <p><h4>GG相亲</h4></p>
                    </a>
                </div>
                <div class="weui-actionsheet__cell">
                      <a href="{% url 'dog-breed-add' %}?next={{ next }}&sex=1" >
                            <img src="{% static 'wxchat/images/mm.png' %}">
                            <p><h4>MM相亲</h4></p>
                      </a>
                </div>
            </div>
        </div>
    </div>
{% endblock add %}
{% block bottomjs %}
    {{ block.super }}
    <script type="application/javascript">
        nextUrl = '{% url 'dog-breed-list' %}';
        var loading = weui.loading('加载中...');
        ///缓存滚动条位置
        $('.weui-tab__panel').scroll(function () {
            if ($(this).scrollTop() != 0) {
                sessionStorage.setItem('offsetTop', $(this).scrollTop());
            }
        });
        $(function () {
            defIndex = sessionStorage.getItem('breed');
            console.log('defindex='+ defIndex);
            weui.tab('#tab',{
                defaultIndex: defIndex ==null?0:defIndex,
                onChange: function(index){
                    sessionStorage.setItem('breed',index);
                }
            });

            $('#dogGGmore').on('click', function () {
                next_url = $(this).attr("data-item");
                getDataList(next_url, 'dogGG');
            });
            $('#dogMMmore').on('click', function () {
                next_url = $(this).attr("data-item");
                getDataList(next_url, 'dogMM');
            });

            getDataList(nextUrl + "?sex=公", 'dogGG');
            getDataList(nextUrl + "?sex=母", 'dogMM');
        });
        function getDataList(url, obj_id) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'json',
                timeout: 5000,
                context: $('#'+obj_id),
                success: function (data) {
                    nextUrl = data.next;

                    appendItem(data.results, obj_id);
                    if (nextUrl == null)
                        $('#' + obj_id + 'more').css('display', 'none');
                    else
                        $('#' + obj_id + 'more').css('display', '');
                        $('#' + obj_id + 'more').attr('data-item', nextUrl);
                    loading.hide();
                    setScollPos();
                },
                error: function (xhr, type, error) {
                    console.log(type);
                }
            });
        }

        function appendItem(results, obj_id) {
            $.each(results, function (index, item) {
                var img_url = item.thumb_url;
                if(img_url == null){
                    img_url = '<i class="icon iconfont icon-pet6  weui-media-box__thumb" ></i>';
                }
                else{
                    img_url = '<img class="weui-media-box__thumb" src="' + img_url + '">'
                }

                var pet_img = '';
                if(item.pet_class == 0){
                     pet_img = '<span class="r"><b><i class="icon iconfont icon-pet7 color-warning" ></i></b></span>';
                }
                else{
                    pet_img = '<span class="r"><b><i class="icon iconfont icon-maomi color-warning" ></i></b></span>';
                }

                item = '<a href="/wechat/dogbreeddetail/' + item.id + '" class="weui-media-box weui-media-box_appmsg">' +
                        '<div class="weui-media-box__hd">' + img_url + '</div>' +
                        '<div class="weui-media-box__bd">' +
                        '<h4 class="weui-media-box__title">' + item.name + pet_img +'</h4>' +
                        '<p class="weui-media-box__desc">' + item.desc + '</p>' +
                        '</div>' +
                        '</a>';
                $('#'+obj_id).append(item);
            });

        }

        ////设置滚动条位置
        function setScollPos() {
            var _offset = sessionStorage.getItem("offsetTop");//获取滚动位置
            $('.weui-tab__panel').scrollTop(_offset);
        }

          // android
        $(function(){
            var $actionSheet = $('#actionsheet');
            var $mask = $actionSheet.find('.weui-mask');

            $("#pet_breed").on('click', function(){
                $actionSheet.fadeIn(200);
                $mask.on('click',function () {
                    $actionSheet.fadeOut(200);
                });
            });
        });



    </script>
{% endblock bottomjs %}
